<script setup>
import {CellGroup, Cell ,Step, Steps,Divider, Field, Form, RadioGroup, Radio, Button, Switch} from "vant";
import {edit, updateStatus} from '@/v-api/addNews'
import {Local} from "@/utils/storage";
import {reactive, ref} from "vue";
import router from "@/router";
const userInfo = Local.get('userInfo')

const AnnForm = reactive({
  schoolId: 1,
  authorId: userInfo.userId,
  privace: true,
  status: 0,
  type: 0,
  title: "",
  content: ""
})

const active = ref(0); // Current active step index
const id = ref();
const nextStep = async () => {
  if (active.value === 0) {
    active.value++;
    id.value = await edit(AnnForm)
  } else if (active.value === 1) {
    console.log(id.value)
    active.value++;
    updateStatus(id.value, 1);
    // Handle if you want to do something when reaching the last step
  } else if (active.value === 2) {
    active.value++;
    updateStatus(id.value, 2);
  }
};
</script>

<template>
<!--  <div class="bg">-->
<!--    <Form @submit="edit(AnnForm)">-->
<!--    <CellGroup inset style="margin: 20px;border: 1px solid black">-->
<!--      <Field-->
<!--          v-model="AnnForm.title"-->
<!--          rows="1"-->
<!--          autosize-->
<!--          type="textarea"-->
<!--          maxlength="30"-->
<!--          placeholder="请输入标题"-->
<!--          show-word-limit-->
<!--          size="large"-->
<!--      />-->
<!--    </CellGroup>-->

<!--    <CellGroup inset style="margin: 20px;border: 1px solid black">-->
<!--      <Field-->
<!--          v-model="AnnForm.content"-->
<!--          rows="3"-->
<!--          autosize-->
<!--          type="textarea"-->
<!--          maxlength="100"-->
<!--          placeholder="请输入内容"-->
<!--          show-word-limit-->
<!--          size="large"-->
<!--      />-->
<!--    </CellGroup>-->

<!--    <CellGroup inset style="margin: 20px;border: 1px solid black">-->
<!--    <Field name="radio" label="单选框" >-->
<!--      <template #input>-->
<!--        <RadioGroup v-model="AnnForm.type" direction="horizontal">-->
<!--          <Radio name="0">通知</Radio>-->
<!--          <Radio name="1">公告</Radio>-->
<!--          <Radio name="2">新闻</Radio>-->
<!--        </RadioGroup>-->
<!--      </template>-->
<!--    </Field>-->
<!--    </CellGroup>-->

<!--      <CellGroup inset style="margin: 20px;border: 1px solid black">-->
<!--        <Button block type="success" native-type="submit">-->
<!--        保存-->
<!--        </Button>-->
<!--      </CellGroup>-->

<!--    </Form>-->
<!--  </div>-->
    <Steps :active="active" active-color="#38f">
      <Step>新增</Step>
      <Step>保存</Step>
      <Step>完成</Step>
      <Step>发布</Step>
    </Steps>
  <div class="bg">
    <Form>
      <CellGroup style="border: 1px solid black">
        <Field readonly>
        <template #label>
          <div class="label-style">标题</div>
        </template>
          <template #left-icon>
            <van-icon name="smile-o" size="25"/>
          </template>
        </Field>
        <Field
            v-model="AnnForm.title"
            rows="1"
            autosize
            type="textarea"
            maxlength="30"
            placeholder="请输入标题"
            show-word-limit
            size="large"
            :rules="[{ required: true, message: '请填写标题' }]"
            v-if="active===0"
        />
        <Field
            v-model="AnnForm.title"
            rows="1"
            autosize
            type="textarea"
            size="large"
            v-if="active===1||active===2||active===3"
            readonly
        />
        <Divider
            :style="{ borderColor: 'black', padding: '0 16px' }"
        >
        </Divider>
        <Field readonly>
          <template #label>
            <div class="label-style">内容</div>
          </template>
          <template #left-icon>
            <van-icon name="smile-o" size="25"/>
          </template>
        </Field>
        <Field
            v-model="AnnForm.content"
            rows="3"
            autosize
            type="textarea"
            maxlength="100"
            placeholder="请输入内容"
            show-word-limit
            size="large"
            :rules="[{ required: true, message: '请填写内容' }]"
            v-if="active===0"
        /><Field
          v-model="AnnForm.content"
          rows="3"
          autosize
          type="textarea"
          size="large"
          v-if="active===1||active===2||active===3"
          readonly
          />
        <Divider
            :style="{ borderColor: 'black', padding: '0 16px' }"
            v-if="active===0"
        >
        </Divider>
        <Field readonly v-if="active===0">
          <template #label>
            <div class="label-style">类型</div>
          </template>
          <template #left-icon>
            <van-icon name="smile-o" size="25"/>
          </template>
        </Field>
        <Field name="radio" v-if="active===0">
          <template #input>
            <RadioGroup v-model="AnnForm.type" direction="horizontal">
              <Radio name="0">通知</Radio>
              <Radio name="1">公告</Radio>
              <Radio name="2">新闻</Radio>
            </RadioGroup>
          </template>
        </Field>
        <Divider
            :style="{ borderColor: 'black', padding: '0 16px' }"
            v-if="active===0"
        >
        </Divider>
        <Field name="switch" label="是否公开" right-icon="warning-o" v-if="active===0">
          <template #input>
            <Switch v-model="AnnForm.privace" size="20" />
          </template>
          <template #label>
            <div class="label-style">是否公开</div>
          </template>
          <template #left-icon>
            <van-icon name="smile-o" size="25"/>
          </template>
        </Field>
      </CellGroup>

      <CellGroup style="margin-top: 20px;border: 1px solid black">
        <Button block type="success"
                native-type="submit"
                @click="nextStep" v-if="active===0">
          保存
        </Button>
        <Button block type="success"
                native-type="submit"
                @click="nextStep" v-if="active===1">
          完成
        </Button>
        <Button block type="success"
                native-type="submit"
                @click="nextStep" v-if="active===2">
          发布
        </Button>
        <Button block type="success"
                @click="router.push({ path: '/add/news' })"
                v-if="active===3">
          结束
        </Button>
      </CellGroup>
    </Form>

  </div>
</template>

<style scoped>
.bg{
  height: 630px; /* 设置高度为页面可视区域的100% */
  background-color: #d3e8d3; /* 设置背景颜色 */
  padding: 20px;
}

.label-style{
  font-size: 16px;
  font-weight: bold;
  color: black;
}
</style>